const path = require("path");
const { VueLoaderPlugin } = require("vue-loader");
module.exports = {
  entry: "./src/main.js",
  output: {
    filename: "bundle.js",
    // 拼接
    path: path.resolve(__dirname, "./build"),
    // assetModuleFilename: "abc.jpg"
  },

  // 如果是一个文件:
  // 口如果文件具有扩展名，则直接打包文件;
  // 口否则，将使用 resolve.extensions选项作为文件扩展名解析
  // 如果是一个文件夹:
  // 口会在文件夹中根据 resolveemainFiles配置选项中指定的文件顺序查找;resolve.mainFiles的默认值是[index];
  // 再根据 resolve.extensions来解析扩展名
  resolve: {
    extensions: [".js", ".json", ".vue", ".jsx", ".ts", ".tsx"],
    alias: {
      utils: path.resolve(__dirname,"./src/utils")
    }
  },
  module: {
    rules: [
      {
        //告诉webpack匹配什么文件
        test: /\.css$/, //正则表达式
        use: ["style-loader", "css-loader", "postcss-loader"],
      },
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader", "postcss-loader"],
      },
      // 资源模块类型(asset module type)，通过添加4种新的模块类型，来替换所有这些 loader:口asset/resource 发送一个单独的文件并导出 URL。
      // 之前通过使用 file-loader 实现;
      // 口asset/inline导出一个资源的 data URl。
      // √之前通过使用 url-loader 实现
      // 口asset/source 导出资源的源代码
      // √之前通过使用 raw-loader 实现
      // 口asset 在导出一个 data URI和发送一个单独的文件之间自动选择
      // 之前通过使用 url-loader，并且配置资源体积限制实现;
      // 1.打包俩张图片，并且这俩张图片有自己的地址，将地址设置到img/bg中
      // 缺点：多图片网络加载的俩次网络请求
      // {
      //   test: /.(png|jpg?g|svg|gif)$/,
      //   type: "asset/resource",
      // },
      // 2.将图片进行base64编码 并且直接编码后的源码放到打包的js文件中
      //
      // 缺点：造成js文件非常大，下载js文件本身消耗时间非常长，造成js代码的下载和解析/执行时间过长

      // {
      //   test: /.(png|jpg?g|svg|gif)$/,
      //   type: "asset/inline",
      // },
      // 3.对于小一点的图片，可以进行base64编码
      // 对于大一点的图片，单独的图片打包，形成url地址，单独请求这个url图片
      {
        test: /.(png|jpe?g|svg|gif)$/,
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 200 * 1024,
          },
        },
        generator: {
          // 占位符
          // name:指向原来的图片名称

          // ext: 扩展名
          // hash:webpack生成的hash
          filename: "img/[name]_[hash:8][ext]",
        },
      },
      {
        test: /\.js$/,
        use: [
          {
            loader: "babel-loader",
            // options:{
            //   plugins:[
            //     "@babel/plugin-transform-arrow-functions",
            //     "@babel/plugin-transform-block-scoping"
            //   ]
            // }
          },
        ],
      },
      {
        test: /\.vue$/,
        loader: "vue-loader",
      },
    ],
  },
  plugins: [new VueLoaderPlugin()],
};
